@extends('home.public.master')
@section('content')
    <div class="main-container container">
        <ul class="breadcrumb">
            <li><a href="/"><i class="fa fa-home"></i></a></li>
            <li><a href="javascript:;">个人中心</a></li>
            <li><a href="{{route('member.member.iconFrom')}}">头像修改</a></li>
        </ul>
        <div class="row">
            <!--Middle Part Start-->
            <div id="content" class="col-sm-9">
                <h1 class=""> 您好:</h1>
                <h3 style="color: orangered;" class="title">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                    &nbsp;{{auth()->user()->name}}</h3>
                <form class="form-horizontal" method="post" action="{{route('member.member.icon')}}">
                    @csrf
                    <fieldset>
                        <legend>头像修改</legend>

                            <div class="content-body">
                                <div class="card">
                                    <div class="card-header" style="text-align: center">
                                        <h1><strong>头像</strong></h1>
                                    </div>
                                    <div id="test1" class="card-body" style="text-align: center;">
                                        <img id="icon" style="width: 200px;height: 200px;border-radius: 50%;"  src="{{auth()->user()->icon}}" alt="">
                                    </div>
                                    <div class="card-footer text-muted" style="text-align: center; margin-top: 20px;color: white;">
                                        <button id="" type="submit" class="btn btn-danger mt-1 mb-2">上传头像:  </button>
                                    </div>
                                    <input hidden type="text" name="iconUrl" id="iconUrl">
                                </div>
                            </div>
                    </fieldset>
                </form>
            </div>
            @include('home.public.left')
        </div>
    </div>
@endsection
@push('js')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '{{route('util.upload.upload')}}'
                , accept: 'images'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#icon').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    if (res.code == 0) {
                        console.log(res.data.src);
                        $('#iconUrl').val(res.data.src);
                        $('#saveIcon').submit()
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    </script>
    @include('member.public.address')
@endpush
